<template>
    <div>
      <div class="msg-card">
        <div class="msg-title">公告板</div>
        <div>
          <el-button type="primary" size="medium">gzgqq.com 新版上线测试中</el-button>
        </div>
      </div>
      <div class="msg-card mt-2">
        <div class="msg-title">本站微信小程序</div>
        <div class="text-center">
          <img src="@/static/images/xiaochengxu.jpg">
        </div>
      </div>
      <div class="msg-card mt-2">
        <div class="msg-title">近期文章</div>
        <div>
          <el-link :href="'/post/' + item.id" :underline="false" class="py-1" v-for="(item, index) in newPosts" :key="index">{{item.title.rendered}}</el-link>
        </div>
      </div>
      <div class="msg-card mt-2">
        <div class="msg-title">标签云</div>
        <div class="flex flex-wrap justify-start" style="margin: 0 -5px;">
          <el-button size="medium" style="margin: 5px;" v-for="(item, index) in tags" :key="index" @click="handleOpenPage(item)">{{item.name}}</el-button>
        </div>
      </div>
    </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed: {
      ...mapState(['tags', 'newPosts'])
    },
    methods: {
      handleOpenPage(item) {
        this.$router.push({path: `/tag/${item.id}`})
      }
    }
  }
</script>

<style scoped lang="scss">
.msg-card {

  .msg-title {
    font-weight: bold;
    color: #475669;
    position: relative;
    margin: 0 0 14px;
    padding: 0 0 12px;
    font-size: 16px;
    line-height: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }

}
</style>
